<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>
  // 回调函数处理异步
  // function delay(ms, desc, callback) {
  //   setTimeout(() => {
  //     const num = Math.random()
  //     // console.log(desc, num)
  //     callback(desc + num)
  //   }, ms)
  // }

  // delay(1000, '第一次', function (res1) {
  //   console.log(res1)
  //   delay(2000, '第二次', function (res2) {
  //     console.log(res2)
  //     delay(3000, '第三次', function (res3) {
  //       console.log(res3)
  //     })
  //   })
  // })



  // Promise 处理异步的一种方式
  // Promise 对象有三种状态：pending、fulfilled、rejected
  // 状态只能改变一次
  // 调用 resolve():  pending ===> fulfilled，执行 then 的第一个参数
  // 调用 reject(): pending ===> rejected，执行 then 的第二个参数
  // then: 接收两个函数作为参数，会返回一个新的promise, 可以链式调用
  // catch: 处理兜底逻辑，then的第二个函数没写，或者执行过程中报错都会执行此函数
  // finally: 状态改变完成执行，不论是 fulfilled、rejected 都会执行

  const p = new Promise((resolve, reject) => {


    setTimeout(() => {
      resolve(111)
      // reject(222)
    }, 3000)
    // console.log(a.b.a)
  })

  let p2 = p.then(
    (res) => {
      // fulfilled 状态执行此函数
      console.log('第一个函数', res)
      // console.log(a.b.c)
    },
    (err) => {
      // rejected 状态执行此函数
      console.log('第二个函数', err)
    }
  )

  // console.log(p)
  // console.log(p2)
  // console.log(p === p2)

  p2.then(() => {
    console.log('第二个then')
  })
  .then(() => {
    console.log('第三个then')
  })
  .catch(e => {
    // 兜底逻辑，then的第二个函数没写，或者执行过程中报错都会执行此函数
    console.log(e)
  })
  





  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
  .then(res => {
    console.log('成功')
  })
  .catch(e => {
    console.log('失败')
  })
  .finally(() => {
    console.log('状态改变完成')
  })


</script>